<template>
	<div class="role">
		<div class="title">
			<div class="key">
				<div class="item">关键字：</div>
				<div class="item">
					<el-input v-model="keywords" clearable placeholder="请输入关键字" @change="search"></el-input>
				</div>
				<div class="item">
					<span>状态：</span>
					<el-select v-model="status" clearable @change="search" placeholder="请选择状态">
						<el-option label="正常" value="1"></el-option>
						<el-option label="禁用" value="0"></el-option>
					</el-select>
				</div>
				<div class="item">
					<el-button type="primary" @click="search">查询</el-button>
				</div>
			</div>
			<div class="item" v-if="power.includes('group_add')">
				<el-button type="primary" @click="addForm">新增</el-button>
			</div>

		</div>
		<div class="tab">
			<el-table
			v-if="initTableList"
			class="marT"
			:data="initTableList.slice((current-1)*size, current*size)"
			:border="true"
			:header-cell-style="{background:'#eef1f6'}">
				<el-table-column
					align="center"
					type="index"
					label="序号"
					width="50">
				</el-table-column>
			<el-table-column align="center" property="name" label="测试组名" ></el-table-column>
			<el-table-column align="center" property="test_leader" label="组长" >
				<template slot-scope="scope">
					<span>{{getLeader(scope.row.test_leader)}}</span>
				</template>
			</el-table-column>
			<el-table-column align="center" property="desc" label="描述" ></el-table-column>
			<el-table-column align="center" property="create_time" label="创建时间" >
				<template slot-scope="scope">
					<span>{{getTime(scope.row.create_time)}}</span>
				</template>
			</el-table-column>
			<el-table-column align="center" property="update_time" label="更新时间">
				<template slot-scope="scope">
					<span>{{getTime(scope.row.update_time)}}</span>
				</template>
			</el-table-column>
			<el-table-column align="center" property="status" label="状态" width="100">
				<template slot-scope="scope">
					<el-tag v-if="scope.row.status == 0" type="primary" effect="plain">禁用</el-tag>
					<el-tag v-if="scope.row.status == 1" type="success" effect="plain">正常</el-tag>
				</template>
			</el-table-column>

			<el-table-column align="center" label="操作">
				<template slot-scope="scope">
					<span><a  @click="toDetails(scope.row.id)">查看</a></span>
					<span><a > | </a></span>
					<span><a @click="toBianji(scope.row.id)" :disabled="!power.includes('group_update')">编辑</a></span>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			background
			layout="prev, pager, next"
			:page-size="tableSize"
			@size-change="tableSizeChange"
			@current-change="tableCurrentChange"
			:current-page="tableCurrent"
			style="text-align: center;height: 100px;"
			:total="tableTotal">
		</el-pagination>
		</div>
		<addForm ref="addForm"></addForm>
		<editForm ref="editForm"></editForm>
	</div>
</template>

<script>
import { getHeader } from '@/app.config'
import Moment from 'moment'
import {group} from '@/api/user'
import addForm from "./model/addForm";
import editForm from "./model/editForm";
export default {
	name: 'testTask',
	components:{
		addForm,
		editForm
	},
	data(){
		return {
			options: [],
			value: '',
			size: 10,
			current: 1,
			total: 0,
			initTableList: [],
			tableSize: 10,
			tableCurrent: 1,
			tableTotal:0,
			keywords:'',
			status:'',
			power:[]

		}
	},
	created() {
		this.initTable()
	},
	methods:{
		search(){
			group({
				keywords:this.keywords,
				status:this.status
			}).then(response => {
				this.initTableList = response.data.data
				this.tableTotal = response.data.totalCount
			})
		},
		getLeader(data){
			let str = ""
			if(data.length > 0){
				data.filter(item => {
					str += item.name+' '
				})
				return str
			}
			else {
				return '暂无'
			}
		},
		tableSizeChange(val) {
			this.tableSize = val
		},
		tableCurrentChange(val) {
			this.tableCurrent = val
			group({
				pageNo:this.tableCurrent,
				pageSize:this.tableSize
			}).then(response => {
				this.initTableList = response.data.data
				this.tableTotal = response.data.totalCount
			})
		},
		initTable(){
			group().then(response => {
				this.power = sessionStorage.getItem('power').split(',')
				this.initTableList = response.data.data
				this.tableTotal = response.data.totalCount
			})
		},
		getTime(data){
			var d = new Date(data);
			var d2 = d.getTime() - 8 * 60 * 60 * 1000
			d = new Date(d2)
			var  resDate = d.getFullYear() + '-' +
				((d.getMonth() + 1)<10?'0'+(d.getMonth() + 1):(d.getMonth() + 1)) + '-' +
				(d.getDate()<10?'0'+d.getDate():d.getDate())+ ' '+
				(d.getHours()<10?'0'+d.getHours():d.getHours())+':'+
				(d.getMinutes()<10?'0'+d.getMinutes():d.getMinutes())+':'+
				(d.getSeconds()<10?'0'+d.getSeconds():d.getSeconds());

			return resDate
		},
		addForm(){
			this.$refs.addForm.dialogFormVisible = true
			this.$refs.addForm.initData(1)
		},
		toBianji(data){
			this.$refs.editForm.dialogFormVisible = true
			this.$refs.editForm.initData(2,data)
		},
		toDetails(data){
			this.$refs.addForm.dialogFormVisible = true
			this.$refs.addForm.initData(3,data)
		}
	}
}
</script>

<style lang="scss" scoped>
	.role{
		padding: 0 10px;
		.tab{
			width: 100%;
			padding: 20px;
			background-color: #fff;
		}
		.title{
			width: 100%;
			padding: 20px;
			display: flex;
			background-color: #fff;
			justify-content: space-between;
			margin: 5px 0;
			.key{
				display: flex;
				.item:first-child{
					line-height: 36px;
				}
				.item:nth-child(3){
					margin: 0 5px;
				}
			}
		}
	}
</style>
